* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  /**
  通用动画数组类
   */

  main {
    padding-top: 50px;

    .AniArr {
      position: relative;
      outline: solid 1px;
      height: 200px;
      width: 80%;
      margin: 0 auto;
      @L: 40px;

      .box() {
        width: @L;
        height: @L;
        background-color: skyblue;
        border-radius: 20%;

        text-align: center;
        line-height: @L;
        font-size: 19px;

        transition: all 0.1s;

        animation-duration: 0.1s;
        animation-iteration-count: 1;

      }

      .ArrayItem {
        .box();
        position: absolute;
        left: 0;
        top: 0;
      }

      .HelpArrayItem {
        .box();
        float: left;
        margin-right: 10px;
      }

      .pointer {
        width: @L;
        height: @L;
        line-height: @L;
        position: absolute;
        top: @L+5;
        text-align: center;
        font-size: 19px;
        transition: all 0.1s;
        outline: solid 1px;
        background-color: black;
        font-weight: bolder;
        color: white;
      }

      .helpList {
        width: 100%;
        height: 60px;
        position: absolute;
        top: @L+@L+@L;
        //outline: solid 1px;
        //background-color: #f0f0f0;
        display: none; // 辅助数组默认是不显示的，只有一些排序特殊用到了js里才特殊显示
      }

      .circle {
        width: @L;
        height: @L;
        border-radius: 50%;
        border: solid 3px red;
        z-index: 300;
        position: absolute;

        animation-name: enlarge;
        animation-duration: 0.2s;
      }

      .mark {
        // 颜色标注
        box-shadow: greenyellow 0 0 5px;
        transform: scale(1.1);
        border-width: 5px;
        border-color: green;
        border-style: solid;
      }

      .flag {
        .box();
        background-color: transparent;
        position: absolute;
        top: -@L;
      }

      .window {
        height: @L+20;
        margin-top: -10px;
        border: solid 8px darkblue;
        border-radius: 10px;
        display: none;
        position: absolute;
        z-index: 150;
        transition: all 0.2s;
        //transform: scaleY(1.2);
      }
    }
  }
}
